<div id="sysUserTable">
    <div class="layui-card layadmin-header">
        <div class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
            <a lay-href="">人员管理</a><span lay-separator="">/</span>
            <a><cite>人员</cite></a>
        </div>
    </div>

    <div class="demoTable">
          <label>名称</label>
       <div class="layui-inline">
              <input class="layui-input" name="name" autocomplete="off">
       </div>
          <label>账号</label>
       <div class="layui-inline">
              <input class="layui-input" name="account" autocomplete="off">
       </div>

          <label>电话</label>
       <div class="layui-inline">
              <input class="layui-input" name="phone" autocomplete="off">
       </div>
          <label>邮箱</label>
       <div class="layui-inline">
              <input class="layui-input" name="email" autocomplete="off">
       </div>
          <label>部门名称</label>
       <div class="layui-inline">
              <input class="layui-input" name="deptName" autocomplete="off">
       </div>

       <button class="layui-btn"  lay-submit lay-filter="btnSearch">搜索</button>
    </div>

    <table class="layui-hide" id="dataTable" lay-filter="data-sysUser"></table>
</div>

<script>
    var tableIns;
    var openIndex;
    layui.use(["table", "jquery", "form", "laydate", "upload"], function () {
        var table = layui.table
        , $ = layui.jquery
        , form = layui.form
        , laydate = layui.laydate
        , upload = layui.upload;
         tableIns = table.render({
            elem: '#dataTable'
            , url: '/sysUser/getSysUsers'
            , page: true
            , limit: 10
            , height: 'full-200'
            , toolbar:'#toolbarDemo'
            , limits: [10, 20, 30,50,100]
            , cols: [[
                {type: 'radio'}
               , {field: 'name', title: '名称'}
               , {field: 'account', title: '账号'}
               , {field: 'phone', title: '电话',width:'10%'}
               , {field: 'email', title: '邮箱',width:'15%'}
               , {field: 'deptName', title: '部门'}
               ,{field:'createTime',title:'创建时间',sort:true,width:'15%'}
                 , {field: 'state', title: '状态',width:'5%'}
            ]]
        });

        //头工具栏事件
          table.on('toolbar(data-sysUser)', function(obj){
              var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            switch(obj.event){
              case 'add':
                $.ajax({
                      url:"/sysUser/add",
                      success:function (html) {
                          openIndex= layer.open({
                              title:"添加",
                              type:1,
                              area: ['600px', '600px'],
                              content:html
                          });
                      }
                  });
              break;
              case 'update':

                  var data = checkStatus.data;  //获取选中行数据
                  var datazhi=JSON.stringify(data);
                  if (datazhi.length>5){
                      $.ajax({
                          url:"/sysUser/update",
                          success:function (html) {
                              openIndex= layer.open({
                                  title:"修改",
                                  type:1,
                                  area: ['600px', '600px'],
                                  content:html,
                                  success:function (layero,index) {
                                      // var  body=layer.getChildParam('openIndex',index);
                                      // body.find('input').val(data.id)
                                  }
                              });
                          }
                      });
                  }else {
                      layer.msg("请选记录");
                  }

                  break;
              case 'isAll':
                layer.msg(checkStatus.isAll ? '全选': '未全选');
              break;
            };
          });

        form.on('submit(btnSearch)', function(data){
         tableIns.reload({
           where: data.field
           ,page:{
            curr:1
           }
         });
          return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


    });
</script>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="add"> <span class="iconfont icon-tianjia"></span>添加</button>
      <button class="layui-btn layui-btn-sm" lay-event="update"> <span class="iconfont icon-xiugai"></span>修改</button>
      <button class="layui-btn layui-btn-sm" lay-event="delete"> <span class="iconfont icon-shanchu"></span>删除</button>
      <button class="layui-btn layui-btn-sm" lay-event="reset"> <span class="iconfont icon-zhongzhi"></span>重置密码</button>
      <button class="layui-btn layui-btn-sm" lay-event="dongjie"> <span class="iconfont icon-jinggao"></span>冻结</button>
      <button class="layui-btn layui-btn-sm" lay-event="nodongjie"> <span class="iconfont icon-tongguo"></span>解除冻结</button>
      <button class="layui-btn layui-btn-sm" lay-event="giveRole"> <span class="iconfont icon-jiaose"></span>角色分配</button>
  </div>
</script>